<template>
    <div>
        <div class="head">
            <div style="width: 100%;">
                <div style="margin-left: 20px;color: white;" v-if="!form.username">立即登录</div>
                <div style="margin-left: 20px;color: white;" v-if="form.username">{{ form.username }}</div>
                <div style="margin-left: 20px;color: white;" v-if="form.usernick">{{ form.usernick }}</div>
            </div>
        </div>
        <van-cell title="个人资料" icon="manager-o" to="manager">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" />
            </template>
        </van-cell>
        <van-cell title="我发起的" icon="birthday-cake-o" to="birthday">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" />
            </template>
        </van-cell>
        <van-cell title="我参加的" icon="comment-circle-o" to="comment">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" />
            </template>
        </van-cell>
        <van-tabbar route>
            <van-tabbar-item replace to="/main" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                usernick: '',
                username: ''
            },
            readonly: false

        };
    },
    created() {
        this.getuser()
    },
    methods: {
        getuser() {
            if (JSON.parse(localStorage.getItem('choujianguser'))) {
                const form = JSON.parse(localStorage.getItem('choujianguser'))
                this.form.usernick = form.usernick
                this.form.username = form.username
            }
        },

    },

}
</script>

<style scoped>
.head {
    height: 100px;
    width: 100%;
    background-color: #1989fa;
    display: flex;
    align-items: center;
}

.van-cell {
    font-size: 16px;
    padding: 15px 15px;
}

.van-field__label {
    color: #333;
}
</style>